<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Page_manager - FNK</title>
        <link rel="stylesheet" href="/static/css/navbar.css">
        <link rel="stylesheet" href="/static/css/page.css">
        <style>
            .title-input {
                width: 100%;
                height: 30px;
                border-radius: 5px;
                padding: 5px;
                margin-bottom: 10px;
            }
            .content-input {
                width: 100%;
                height: 300px;
                padding: 5px;
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <nav class="navbar">
            <div class="logo">FNK</div>
            <ul class="nav-links">
                <li><a href="/home">首页</a></li>
                <li><a href="/file">文件</a></li>
                <li><a href="/note">笔记</a></li>
                <li><a href="/resource">资源</a></li>
                <li><a href="/about">关于</a></li>
            </ul>
            <div class="users">
            {% if user %}
                <p>{{ user }}</p>
                <button class="user-btn" onclick="javascript:location.href='/logout'">登出</button>
            {% else %}
                <button class="user-btn" onclick="javascript:location.href='/login'">登录</button>
            {% endif %}
            </div>
        </nav>
        <div class="page-box">
            <div class="page-header">
                <h1 class="title">Page manager</h1>
            </div>
            <div class="page-content">
                <div style="background-color: #e0e0e0; padding: 10px; margin-bottom: 10px; border-radius: 5px;">
                    <h3>Created Pages</h3>
                    <ul style="font-size: large;">
                        {% for page in pages %}
                            <li><a href="/page/{{ page }}">{{ page }}</a></li> <button onclick="javascript:location.href='/page/{{ page }}?mode=delete'">Delete</button>
                        {% else %}
                            <em>No pages created yet.</em>
                        {% endfor %}
                    </ul>
                </div>
                <div style="background-color: #dbdbdb; padding: 10px; margin-bottom: 10px; border-radius: 5px;">
                    <h3>Create a new page</h3>
                    <form action="/cons/page" method="POST">
                        <input maxlength="200" type="text" name="title" value="{{ title }}" placeholder="Title" class="title-input" required><br>
                        <textarea placeholder="Content..." id="editor" name="content" class="content-input">{{ content }}</textarea>
                        <div style="padding-top: 5px;">
                            <button type="submit" class="btn" onclick="return CheckContent()">提交</button>
                        </div>
                        <script>
                            function CheckContent() {
                                var title = document.getElementsByName("title")[0].value;
                                if (title.length == 0) {
                                    alert("Title cannot be empty!");
                                    return false;
                                }
                                var content = document.getElementById("editor").value;
                                if (content.length == 0) {
                                    alert("Content cannot be empty!");
                                    return false;
                                }
                                return true;
                            }
                        </script>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>